Statisches Website-Kit

Sag Kitty, was du willst.

Kitty verbindet ein schlankes Website-Kit mit einem geführten KI-Kontext. Du brauchst keine fertige Spezifikation: Die KI fragt nach, hält Entscheidungen fest und setzt die Website mit gemeinsamen Tokens, Bausteinen und Regeln um.

Download Kitty Dokumentation

Warum Kitty

Ein Baukasten mit Prinzipien — keine Template-Wühlkiste.

Sechs Grundsätze stecken in jeder Datei. Deshalb passt am Ende alles zusammen, egal wer (oder was) die Seite gebaut hat.

Kein Build-Step

Reines HTML, CSS und JS. Läuft per Doppelklick und auf jedem Server — kein Node, kein Deploy-Ritual, kein Versionschaos.

Alles über Tokens

Drei Markenfarben bilden die Basis. Flächen und Hover-Töne werden daraus abgeleitet; Textkontraste bleiben bewusste Entscheidungen, die Kitty im Styleguide und Qualitätscheck sichtbar macht.

Datenschutz mitgedacht

Selbst gehostete Schrift, optionales Consent-Modul mit Prior-Blocking und eine technische Basis fürs Kontaktformular. Externe Dienste kommen nur bewusst und projektspezifisch dazu.

A11y mitgedacht

Skip-Link, sichtbarer Fokus, Tastaturbedienung, Reduced Motion und Kontrastprüfungen schaffen eine hilfreiche Basis. Kitty weist auf gute Standards hin, ohne bewusste Entscheidungen zu blockieren.

Denkt in Sektionen

Wiederverwendbare Bausteine und neutrale Templates. Neue Seiten entstehen durch Kombinieren, nicht durch Copy-Paste-Chaos.

Geführter KI-Kontext

Klare Rollen für Regeln, Arbeitsweise und Projektentscheidungen machen Kitty maschinenlesbar. So bleibt eine KI-Session konsistent und fragt nach, bevor sie wichtige Lücken selbst füllt.

0
Build-Abhängigkeiten im Kern
1
Design-System für alle Seiten
100%
statischer Kern

Fragen, entscheiden, umsetzen

Du gibst die Richtung. Kitty führt durch den Prozess.

Die KI arbeitet nicht nur einen Prompt ab. Sie klärt den nächsten sinnvollen Schritt, empfiehlt eine Richtung und hält den Projektstand fest, bevor sie mit den Bausteinen des Kits umsetzt.

01

Beschreibe das Ziel

Ein kurzer Satz genügt für den Anfang. Unbekannte Inhalte und Entscheidungen dürfen ausdrücklich offenbleiben.

02

Kitty klärt und merkt sich

Die KI stellt passende Fragen und schreibt bestätigte Antworten, Annahmen und offene Punkte in das Projektgedächtnis.

03

Umsetzung im System

Tokens, Templates und Komponenten werden zu nachvollziehbaren Dateien kombiniert. Optionale Dienste bleiben als solche erkennbar.

„Ich habe ein Logo und erste Texte, aber noch keine Seitenstruktur. Hilf mir, den nächsten sinnvollen Schritt zu klären.“

„Diese Entscheidung ist bestätigt. Halte sie im Projektstand fest und setze zunächst nur den ersten Viewport um.“

Arbeitsweise ansehen

Das System

Ein Token dreht, alles zieht nach.

Das Erscheinungsbild läuft über Design-Tokens in einer gemeinsamen Foundation. Aus drei Markenfarben leitet Kitty Flächen, Ränder und Hover-Töne ab. Text auf Markenflächen bleibt eine bewusste Kontrastentscheidung, die direkt geprüft wird.

Layout trennt sauber zwischen Bandbreite und Contentbreite: Bänder laufen voll durch, Text bleibt überall gleich ausgerichtet. Boxed oder Full-Width entscheidet eine einzige Klasse.

Zum Styleguide 
:root {
  --color-brand:   #ffd400;  /* primäre Signalfarbe   */
  --color-brand-2: #175bd6;  /* zweite Marke         */
  --content-max:   1160px;   /* Textbreite           */
}

/* Flächen und Hover leitet Kitty ab.
   Textkontraste werden bewusst gewählt. */
Brand #ffd400
Text #171716
Section Tint #f6f6f4
„Erst verstehen, dann gestalten. Entscheidungen bleiben nachvollziehbar, und die Umsetzung bleibt im gemeinsamen System.“
— Ein Kitty-Prinzip

Loslegen

Sieh dir an, was drinsteckt.

Typografie, Spaltenlayouts und der komplette Baukasten — als lebende Beispiele zum Durchklicken.

Zum Style Guide Dokumentation